<template>
	<view>
		<!--  <u-navbar id="navbar" :is-back="true" back-icon-color="#FFFFFF" :back-text-style="backstyle" title-color="#FFFFFF"
      back-text="评价" :background="background">
    </u-navbar> -->
		<view class="head-box" :style="[{ 'margin-top':'-'+ height + 'px'}]">
			<view class="center-box" :style="[{ 'margin-top': height + 'px'}]">
				<u-navbar :background="background" back-icon-color="#FFFFFF">
				</u-navbar>
				<!-- 评价 -->
				<view class="evaluate-boxs">
					<!-- 评价店铺名称 -->
					<view class="above-top-box">
						<view class="shop-name">
							<!-- 健康之家（百家湖店） -->
							{{shopName}}
						</view>
						<view @tap.stop="isNiName" class="choose-anonymity" @tap="anonymityTap()">
							<view class="ischoose-img" v-show="isAnonymity == true">
								<image
									:src="anonyFlag?'https://bsyjk-pic.bsyjk.cn/l/1281472406B2457094F1852A172674A1.png':''"
									style="width: 40upx;height: 40upx;" mode=""></image>
							</view>

							<view class="ischoose-imgs" v-show="isAnonymity == false">

							</view>

							<view class="anonymity-text">
								匿名
							</view>
						</view>

					</view>
					<!-- 分割线 -->
					<view class="cut-off-box">
						<image src="https://bsyjk-pic.bsyjk.cn/l/6E259FCA9E1945439CE16D515A1529F4.png"
							style="width: 100%;height: 28upx;" mode=""></image>
					</view>

					<view class="the-total-score">
						<u-rate v-model="allnumber" :disabled="true" size="48" active-color="#FFAA00"
							inactive-color="#FFAA00"></u-rate>
					</view>
					<view class="satisfaction-text">
						{{allnumberManner}}
					</view>
					<view style="width: 100%;border-top:1rpx dotted #E2E1E2;margin-top: 30upx;"> </view>
					<view class="detail-evaluate">
						<view class="the-total-scores">
							<text class="evaluate-type">效果</text>
							<u-rate v-model="effectGrade" @change="effectGradeC" size="32" active-color="#FFAA00"
								inactive-color="#FFAA00"></u-rate> <text
								class="praise-text">{{effectGradeManner}}</text>
						</view>
						<view class="the-total-scores">
							<text class="evaluate-type">服务</text>
							<u-rate v-model="serviceGrade" @change="serviceGradeC" size="32" active-color="#FFAA00"
								inactive-color="#FFAA00">
							</u-rate> <text class="praise-text">{{serviceGradeManner}}</text>
						</view>
						<view class="the-total-scores">
							<text class="evaluate-type">环境</text>
							<u-rate v-model="enviroGrade" @change="enviroGradeC" size="32" active-color="#FFAA00"
								inactive-color="#FFAA00">
							</u-rate> <text class="praise-text">{{enviroGradeManner}}</text>
						</view>
					</view>
					<view class="input-more-box">
						<textarea class="textbox" v-model="appraiseDesc" maxlength="100" placeholder="写下你的评语吧..."
							placeholder-style="font-size:28rpx;color:#9B9B9B" @input="descInput" />
						<view class="schedule"><text class="write-num">{{remnant}}</text><text
								class="write-max-num">/100</text>
						</view>
					</view>
					<!-- 发布评价按钮 -->
					<view class="issue-but" @tap="storeMd(anonyFlag)">
						发布评价
					</view>
					<view class="" style="height: 46upx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function mannerF(e) {
		let manner = ''
		if (e == 5) {
			manner = '非常满意'
		} else if (e == 4) {
			manner = '满意'
		} else {
			manner = '一般'
		}
		return manner
	}

	function total(e, _this) {
		let effectGrade = _this.effectGrade,
			enviroGrade = _this.enviroGrade,
			serviceGrade = _this.serviceGrade;
		let allnumber = effectGrade + enviroGrade + serviceGrade;
		allnumber = parseInt(allnumber / 3);
		console.log(allnumber)
		_this.allnumber = allnumber;
		_this.allnumberManner = mannerF(allnumber)
		return {
			manner: mannerF(e)
		}
	}


import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"


import uRate from "@/uview-ui/components/u-rate/u-rate.vue"
	export default {
		components: {
			uNavbar,
			uRate
		},
		data() {
			return {
				effectGradeManner: '非常满意',
				enviroGradeManner: '非常满意',
				serviceGradeManner: '非常满意',
				allnumberManner: '非常满意',
				effectGrade: 5,
				enviroGrade: 5,
				serviceGrade: 5,
				allnumber: 5,
				appraiseDesc: '', //评论内容
				orderId: '', //订单id
				anonyFlag: true,
				background: {
					backgroundImage: 'linear-gradient(10deg, rgb(129, 192, 66,0), rgb(46, 167, 224,0))'
				},
				remnant: 0, //字数
				background: {
					backgroundImage: 'linear-gradient(10deg, rgb(129, 192, 66,0), rgb(46, 167, 224,0))'
				},
				backstyle: {
					color: '#ffffff',
					'white-space': 'nowrap',
					'font-size': '36upx'
				},
				height: 0,
				send: false, //点击状态
				colro: '#666666',
				shopName:'',//店铺名称
				isAnonymity:false,//是否匿名
			};


		},
		// created(anonyFlag) {
		//   // this.$forceUpdate();
		//   // this.height = JSON.parse(uni.getStorageSync('navHeight'));
		//   // console.log(this.height)
		// },
		onLoad(e) {
			this.orderId = e.orderId;
			this.shopName = e.name;
		},
		methods: {
			//是否匿名
			isNiName(){
			this.isAnonymity = !this.isAnonymity;
			},
			serviceGradeC(e) {
				this.serviceGrade = e;
				let _this = this;
				this.serviceGradeManner = total(e, _this).manner
			},
			enviroGradeC(e) {
				this.enviroGrade = e;
				let _this = this;
				this.enviroGradeManner = total(e, _this).manner
			},
			// 效果
			effectGradeC(e) {
				this.effectGrade = e;
				let _this = this;
				this.effectGradeManner = total(e, _this).manner
				// console.log(e,120)
			},
			// 评论
			storeMd() {
				let fdata = {
					sumGrade: this.allnumber, //总分
					anonyFlag: this.isAnonymity ? 1 : 0, //是否匿名
					appraiseDesc: this.appraiseDesc, //内容
					effectGrade: this.effectGrade,
					enviroGrade: this.enviroGrade,
					serviceGrade: this.serviceGrade,
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
					orderId: this.orderId,
					sumGrade: this.allnumber
				}
				this.$shopnew.post(global.apiUrls.storeMd, fdata)
					.then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {})
			},
			// 是否匿名
			anonymityTap() {
				this.isAnonyFlag = !this.isAnonyFlag;
			},
			//字数
			descInput: function(e) {
				// console.log(e.detail.value)
				this.appraiseDesc = e.detail.value
				this.remnant = this.appraiseDesc.length
			},

		},


	}
</script>

<style lang="scss" scoped>
	.title {
		color: #FFFFFF;
		font-size: 36upx;

	}


	.head-box {
		padding: 1upx 0upx;
		background-image: url(https://bsyjk-pic.bsyjk.cn/l/FE346AE2411441CC84F832E88A692FA9.png);
		background-size: 100% 100%;
		height: 100vh;

		.center-box {
			background-color: rgba(245, 187, 0, 0);
			width: 100%;

			.evaluate-boxs {
				position: relative;
				width: 687upx;
				background-color: #FFFFFF;
				border-radius: 26upx;
				margin-top: 40upx;
				margin-left: 30upx;

				.above-top-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 176upx;
					padding: 0upx 36upx;

					.shop-name {
						font-size: 36upx;
						font-weight: 500;
						color: #222B45;
						line-height: 50upx;
					}

					.choose-anonymity {
						display: flex;
						align-items: center;

						.ischoose-img {
							width: 40upx;
							height: 40upx;
							margin-right: 16upx;
							border-radius: 50%;

						}
						.ischoose-imgs {
							width: 40upx;
							height: 40upx;
							margin-right: 16upx;
							border-radius: 50%;
							background-color: #2EA7E0;
							opacity: 0.6;
						}

						.anonymity-text {
							font-size: 30upx;
							font-weight: 500;
							color: #222B45;
							line-height: 42upx;
						}
					}
				}

				//分割线
				.cut-off-box {
					position: absolute;
					width: 718upx;
					height: 28upx;
					top: 176upx;
					left: -13upx;
				}

				.the-total-score {
					width: 100%;
					text-align: center;
					margin-top: 40upx;

					// margin-left: 162upx;
				}

				.satisfaction-text {
					width: 100%;
					text-align: center;
					font-size: 30upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #F56767;
				}

				.detail-evaluate {
					.the-total-scores {
						width: 100%;
						// text-align: center;
						margin-left: 160upx;
						// background-color: #823492;
						margin-top: 30upx;

						.evaluate-type {
							font-size: 26upx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #222B45;
							margin-right: 10upx;
						}

						.praise-text {
							font-size: 26upx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #F56767;
							margin-left: 10upx;
						}
					}

				}

				.input-more-box {
					width: 639upx;
					min-height: 200upx;
					border-radius: 16upx;
					// background-color: #F5F5F5;
					margin-left: 24upx;
					margin-top: 28upx;
					padding: 24upx 20upx;
					border: 1rpx solid #E4E9F2;
					border-radius: 4upx;

					.textbox {
						width: 100%;
						height: 200upx;
					}

					.schedule {
						width: 100%;
						text-align: right;
						font-size: 24upx;

						.write-num {
							color: #2EA7E0;
						}

						.write-max-num {
							color: #9B9B9B;
						}
					}

				}

				.issue-but {
					width: 655upx;
					height: 90upx;
					border-radius: 45upx;
					background-image: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png);
					background-size: 100% 100%;
					text-align: center;
					line-height: 90upx;
					color: #FFFFFF;
					font-size: 34upx;
					margin-top: 40upx;
					margin-left: 15upx;
				}







			}




		}

	}
</style>
